﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>

<html>
	<head>
		<title><fmt:message key="label.title" /></title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="css/core.css" />
		
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-2048309-3']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
		<script type="text/javascript"
			src="http://maps.google.com/maps/api/js?sensor=false">
		</script>
		<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(22.383095,114.120483);
				var myOptions = {
					zoom: 11,
					center: latlng,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var map = new google.maps.Map(document.getElementById("map_canvas"),
					myOptions);
				var infowindow = new google.maps.InfoWindow();
				var latlngbounds = new google.maps.LatLngBounds();
				
				<c:forEach items="${trafficInfo.area}" var="area">
					<c:forEach items="${area.dot}" var="dot">
						<c:if test="${not empty dot.dotLatlng}">
							marker = new google.maps.Marker({
								position: new google.maps.LatLng(${dot.dotLatlng}),
								title:"${dot.dotName}"
							});
							marker.setMap(map);
							latlngbounds.extend(new google.maps.LatLng(${dot.dotLatlng}))
							createMyInfoWindow(map, marker, infowindow, '<div id="bodyContent"><img src="${dot.dotURL}" width="180"></div>');
						</c:if>
					</c:forEach>
				</c:forEach>
				map.fitBounds(latlngbounds)
			}

			function createMyInfoWindow(mymap, mymarker, myinfo, mycontent) {
				google.maps.event.addListener(mymarker, 'click', function() {
					myinfo.setContent(mycontent);
					myinfo.open(mymap, mymarker);
				});
			}
		</script>
	</head>
	<body onload="initialize()">
		<header>
			<h1><fmt:message key="label.title" /></h1>
		</header>
		<article>
			<center>
			<div class="shadow" id="map_canvas"></div>
			<br>
			<span id="updateTime">Last Updated Time: ${trafficInfo.lastUpdateTime}</span>
			</center>
		</article>
	</body>
</html>
